<script lang="ts" name="Login" setup>
import { loginApi } from '@/api/login/index'

const router = useRouter()
const loginForm = reactive({
    //   tenantId:'',
    username: '13485258943',
    password: 'password'
})

const rules = reactive({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ]
});

async function handleSubmit() {
    try{
        const {data} = await loginApi(loginForm)
        if (data.access_token) {
            localStorage.setItem('access_token', 'Bearer '+data.access_token)
            localStorage.setItem('refresh_token', data.refresh_token)
            router.push('/')
            ElNotification({
                title: '系统通知',
                message: '登录成功',
                duration: 1500,
                type: 'success',
                showClose: false,
            })
        }else {
            ElMessage.error('用户名或者密码错误')
        }
    }catch(e:any){
        ElMessage.error('登录失败:'+e.response.data.error)
    }
    
}

</script>
<template>
    <div w-screen h-screen flex box-border flex-justify-center flex-items-center>
        <div style="box-shadow: var(--el-box-shadow);" box-border p-4 w-md>
            <h2 text-center>统一认证平台</h2>
            <el-form :model="loginForm" label-width="auto" @submit.prevent="handleSubmit" :rules="rules">
                <!-- <el-form-item label="租户">
                    <el-input v-model="loginForm.tenantId" />
                </el-form-item> -->
                <el-form-item label="账号">
                    <el-input v-model="loginForm.username" autofocus />
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="loginForm.password" show-password />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" w-full native-type="submit">登录</el-button>
                </el-form-item>
            </el-form>
            <p flex flex-justify-between flex-items-center>
            <div>忘记密码</div>
            <div>注册</div>
            </p>
            <div flex flex-justify-end flex-items-center mt-4>
                <div>
                    <ElLink href="http://127.0.0.1:8088/auth/oauth2/authorization/gitee" target="primary" mr-2 >Gitee</ElLink>
                </div>
            </div>
        </div>
    </div>
</template>